<template>
  <el-row class="bid-box">
    <div class="bidheader">
      <bid-set-time
        class="fr"
        v-if="merEndTime"
        :list.sync="list.list"
        :merEndTime.sync="merEndTime"
        :merId = "id">
      </bid-set-time>
      <div class="bidswitch">
        <span>只显示开标内容：</span>
        <el-switch
          v-model="opening"
          on-text="开"
          off-text="关"
          @change="handleSwithStatue">
        </el-switch>
      </div>
    </div>
    <el-collapse v-model="list.activeNames" class="collapse-bid">
      <el-collapse-item
        :name="item.id"
        v-show="opening == 1 || (item.rightsStatus == 1 && opening == 0)"
        v-for="(item,index) in list.list"
        :key="index">
        <template slot="title">
          {{item.rightsName}}
          <span v-if="item.startTime">（开标时间：{{item.startTime | FormatDate('yyyy-MM-dd')}}）</span>
        </template>
        <div class="collapse-box">
          <el-table
            :ref="`Table${item.id}`"
            :data="item.list"
            style="width: 100%"
            class="table"
            tooltip-effect="dark"
            @selection-change="handleSelection"
            @select-all="handleSelectAll"
            @select="handleSelect">
            <el-table-column
              type="selection"
              width="60">
            </el-table-column>
            <el-table-column
              prop="name"
              label="投标人信息"
              width="300"
              align="center">
              <template slot-scope="scope">
                <div class="info">
                  <e-img-match class="logo" :src="scope.row.iconUrl" />
                  <div class="right">
                    <h3 class="text-center">{{scope.row.nickName}}</h3>
                    <p>认证类型：{{scope.row.authType?scope.row.authType:'--'}}</p>
                    <p>行业类型：{{scope.row.businessType?scope.row.authType:'--'}}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="投标时间"
              align="center">
              <template slot-scope="scope">
                {{scope.row.updateTime | FormatDate('yyyy-MM-dd')}}
              </template>
            </el-table-column>
            <el-table-column
              prop="bidStatus"
              label="状态"
              align="center">
              <template slot-scope="scope">
                {{scope.row.bidStatus | sponsorBidStatus}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="200">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  :disabled="!scope.row.fooderUrl"
                  @click="handleShowFooter(scope.row)">查看诉求</el-button>
                <el-button size="mini"
                  @click="handleRefused(index, scope)"
                  :disabled="scope.row.bidStatus==2 || scope.row.bidStatus==3">拒绝</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" class="save" @click="handleSave($event, item)" v-if="item.rightsStatus == 0">确定中标</el-button>
        </div>
      </el-collapse-item>
    </el-collapse>
    <e-placeholder v-if="opening == 0 && list.isNoOpen==0" text="当前没有开标项目" src="/static/images/sponsor/nodata_brand.png">
    </e-placeholder>
    <!--<iframe v-on:load="down"></iframe>-->
  </el-row>
</template>
<script>
  import {form} from 'utils/mixins' // 引入form mixin
  import { mapGetters } from 'vuex'
  import BidSetTime from './components/BidSetTime'
  import api from 'api/merchants'
  import {iframeDownload} from 'utils'
  export default{
    mixins: [form],
    components: {
      BidSetTime
    },
    computed: {
      ...mapGetters({
        list: 'sponsor_merchants_bid_list'
      })
    },
    props: {
      merEndTime: {},
      id: {}
    },
    data () {
      return {
        activeNames: 0,
        dialogFormVisible: false,
        opening: false
      }
    },
    created () {
      this.$store.dispatch('sponsor_merchants_bid_list', {merId: this.id})
    },
    methods: {
      handleSelect (selection, row) { // 点击某一行
        this.tableOnly(row)
      },
      handleSelection (selection) { // 当表格选中变化时
        selection.map(item => {
          this.tableRemoveDel(item)
        })
      },
      handleSelectAll (selection) { // 全选
        if (selection[0] && selection[0].exclusiveStatus === 1) {
          this.$refs[selection[0].tableName][0].clearSelection()
        }
      },
      tableRemoveDel (json) { // 删除已拒绝的
        if (json.bidStatus === 2) {
          this.$refs[json.tableName][0].toggleRowSelection(json, false)
        }
      },
      tableOnly (json) { // 排他性的单选处理
        if (json.exclusiveStatus === 1) {
          this.$refs[json.tableName][0].clearSelection()
          this.$refs[json.tableName][0].toggleRowSelection(json, true)
        }
      },
      tableInit (data, tableName) { // 处理初始化赋值操作
        let that = this
        data.forEach(item => {
          if (item.bidStatus === 3) {
            that.$refs[tableName][0].toggleRowSelection(item, true)
          }
        })
      },
      handleRefused (lv1, scope) { // 拒绝投标
        this.$confirm('确定拒绝该投标？', '提示', {
          type: 'warning'
        }).then(() => {
          // 执行删除接口
          api.bid_Refused({
            id: scope.row.id
          }).then(json => {
            this.$store.commit('SPONSOR_MERCHANTS_BID_REFUSED', {
              lv1: lv1,
              lv2: scope.$index
            })
            this.tableRemoveDel(scope.row)
          })
        })
      },
      handleShowFooter (item) { // 查看赞助诉求 下载文件
        iframeDownload({
          fileName: item.fooderName,
          fileUrl: item.fooderUrl
        })
      },
      handleSave (event, item) { // 确定中标
        let select = []
        this.$refs['Table' + item.id][0].selection.map(item => {
          select.push(item.id)
        })
        if (select.length === 0) return
        api.bid_save({
          id: select.join(','),
          merId: item.merId,
          rightsId: item.id
        }, {context: event.target}).then(res => {
          // 执行成功重新获取列表数据
          this.$store.dispatch('sponsor_merchants_bid_list', {merId: this.id})
        })
      },
      handleSwithStatue (val) { // 改变状态处理展开
        if (val === '0') {
          //  展开所有中标的
          let arr = []
          this.list.list.forEach(item => {
            if (item.rightsStatus === 1) arr.push(item.id)
          })
          this.list.activeNames = arr
          this.list.list = this.checklist(this.list.list, 'rightsStatus', 1)
        } else {
          this.$store.dispatch('sponsor_merchants_bid_list', {merId: this.id})
        }
      },
      checklist (list, name, value) {
        var nlist = []
        list.forEach((item) => {
          if (item[name] === value) {
            if (item.list) {
              item.list = this.checklist(item.list, 'bidStatus', 3)
            }
            nlist.push(item)
          }
        })
        return nlist
      }
    }
  }
</script>
<style lang="scss">
  .bidheader{
    margin-bottom: 10px;
    &:after{
      content: '';
      clear: both;
      display: table;
    }
    .bidswitch{
      float: right;
      margin-top: 10px;
      line-height: 22px;
      margin-right: 30px;
    }
  }
  .bid-box{
    padding:10px;
    .el-collapse{
      border-left:0px;
      border-right:0px;
    }
    .el-collapse-item__content{
      padding: 0;
    }
    .collapse-box{
      background: #fff;
      padding-bottom: 60px;
      table{
        th {
          background-color: #f5f5f5;
          text-align: center;
        }
      }
      .save{
        margin: 20px auto 0;
        display: block;
      }
      .info{
        margin: 10px 0;
        padding: 10px 0;
        display:table;
        .logo{
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        .right{
          flex-grow: 1;
          display: table-cell;
          vertical-align:middle;
          padding-left: 10px;
          text-align: left;
          h3{
            font-size: 16px;
          }
          p{
            font-size: 14px;
          }
        }
      }
    }
    .el-table tr:last-child td {
        border-bottom: 0;
    }
    .el-table__body-wrapper{
      overflow: hidden;
    }
    .el-collapse{
      border-top: 0;
      .el-collapse-item{
        background: #000000;
        .el-collapse-item__header{
          padding: 10px 20px;
          height: 63px;
          .right{
            float: right;
          }
          &:before{
            float: right;
            content: '展开内容';
            display: inline-block;
            color: #367fff;
          }
        }
        &.is-active{
          .el-collapse-item__header{
            &:before{
              content: '收起内容';
            }
          }
          .el-collapse-item__header{
            .el-collapse-item__header__arrow {
              transform: rotate(-90deg);
            }
          }
        }
        .el-collapse-item__header__arrow{
          float: right;
          transform: rotate(90deg);
          display: inline-block;
          margin-top: 16px;
          color: #367fff;
          &.el-icon-arrow-right:before {
            content: "\e606";
          }
        }
      }
    }
  }


</style>
